<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>js桥接测试</title>
    <style>
    div{
        color:red;
        font-size:50px;
    }
   input,p{
        font-size:40px;
    }


    </style>
</head>

<body>
<div id="show"></div>
<p>
    <input type="button" id="enter" value="调用Native默认方法" onclick="msg2native();"/>
</p>
<p>
    <input type="button" id="enter1" value="调用Native自定义方法" onclick="msg2native2();"/>
</p>
</body>
<script>

    /**
     * 调用Native默认方法
     */
   function msg2native() {
       window.WebViewJavascriptBridge.send({'param': '中文测试'},function(responseData){
            console.log(responseData);
            document.getElementById("show").innerHTML = "[WebViewJavascriptBridge.send] web got a response from native ：" + responseData
       })
    }

     /**
     * 调用Native自定义方法
     */
    function msg2native2() {
       window.WebViewJavascriptBridge.callHandler("functionInNative",{'param': 'hello native!'},function(responseData){
            document.getElementById("show").innerHTML = "[WebViewJavascriptBridge.callHandler] web got a response from native ：" + responseData
       })
    }

    /**
     * 连接桥接文件
     * @param callback
     */
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady',
                function () {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }

    setTimeout(function () {
        connectWebViewJavascriptBridge(function (bridge) {
            //设置默认的方法接收器
            bridge.init(function (message, responseCallback) {
                document.getElementById("show").innerHTML = "[WebViewJavascriptBridge._messageHandler] web got a message from native ：" + message
                console.log('[WebViewJavascriptBridge._messageHandler] web got a message from native', message);
                var data = {
                    'web response': '接收成功!'
                };
                if (responseCallback) {
                    responseCallback(data);
                }
            });

           bridge.registerHandler("functionInJs", function (message, responseCallback) {
                document.getElementById("show").innerHTML = "[WebViewJavascriptBridge._messageHandler] web got a message from native ：" + message
                console.log('[WebViewJavascriptBridge._messageHandler] web got a message from native', message);
                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });
        });
    }, 2000)




</script>

</html>

